语义话标签 ✅

HTML5 引入了许多新的语义化标签和属性，旨在使网页结构更加清晰、易于理解，并提高搜索引擎优化（SEO）和可访问性。

常见的 HTML5 语义化标签

结构化标签

<header> 设计用途：定义文档或节的页眉，通常包含导航链接、logo、搜索表单等。

<header>
  <h1>网站标题</h1>
</header>

<footer> 用途：定义文档或节的页脚，通常包含版权信息、联系信息等。

<footer>
  <p>© 2018 公司名称</p>
</footer>

<main> 设计用途：定义文档的主要内容区域。

<main>
  <h2>主要内容</h2>
  <p>这里是主要内容。</p>
</main>

<section> 设计用途：定义文档中的一个章节或部分。

<section>
  <h2>章节标题</h2>
  <p>章节内容。</p>
</section>

<article> 用途：定义独立的、自包含的内容，如博客文章、新闻报道等。

<article>
  <h2>文章标题</h2>
  <p>文章内容。</p>
</article>

<aside> 用途：定义与主要内容相关的附属内容，如侧边栏、注释、广告等。

<aside>
  <h3>侧边栏</h3>
  <p>侧边栏内容。</p>
</aside>

<nav> 设计用途：定义导航链接的部分。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
  </ul>
</nav>

文本级语义

<mark> 用途：定义被标记的文本，通常用于高亮显示。

<p>这是一个包含<mark>标记</mark>的文本。</p>

<time> 用途：定义日期和时间。

<p>会议将在<time datetime="2025-05-15T19:00">5月15日晚上7点</time>举行。</p>

<bdi> <bdo> 用途：定义文本的隔离方向，用于多语言环境。定义文本的显示方向。

<p>用户名：<bdi>用户1</bdi></p>
<p><bdo dir="rtl">这是一个从右到左的文本。</bdo></p>

<wbr> 用途：定义一个可能的换行点。

<p>这是一个非常长的单词：超级califragilisticexpialidocious<wbr>，可以在需要时换行。</p>

<strong> <em> 用于强调文本。

<blockquote> <cite> 用于引用和引用来源。

<code>, <samp>, <kbd> 用于表示代码示例、程序输出和用户输入。

<del> <ins> 用于表示删除和插入的文本。

嵌入内容

<embed> <object> 用途：定义嵌入的内容，如插件、媒体等。定义嵌入的对象，如图像、音频、视频、Java applet 等。

<embed src="movie.swf" width="400" height="300" type="application/x-shockwave-flash">
<object data="image.jpg" width="300" height="200">
  <img src="image.jpg" alt="示例图像">
</object>

<audio> <video> 用途：定义音频内容。定义视频内容。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频元素。
</video>

<canvas> 用途：定义图形容器，用于绘制图形。

<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持画布元素。
</canvas>

<iframe> 用途：嵌入另一个 HTML 页面。

<iframe>
</iframe>

表单相关

<output> 用途：定义计算或用户操作的结果。

<output name="result" for="a b"></output>

<progress> <meter> 用途：定义任务的进度。定义度量衡，如温度、重量等。

<progress value="70" max="100">70%</progress>
<meter value="5" min="0" max="10">5 out of 10</meter>

<fieldset> <legend> 将表单元素分组。为 fieldset 元素定义标题。

交互性

<details> <summary> 用途：定义用户可以查看或隐藏的详细信息。定义 details 元素的可见标题。

<details>
  <summary>点击查看详细信息</summary>
  <p>这里是详细信息。</p>
</details>

<dialog> 用途：定义对话框或窗口。

<dialog open>
  <p>这是一个对话框。</p>
</dialog>

<menu> <menuitem> 用途：定义菜单列表。定义菜单项。

<menu type="toolbar">
  <menuitem label="保存" onclick="save()"></menuitem>
  <menuitem label="打印" onclick="print()"></menuitem>
</menu>

Web Components

<slot> 用途：定义在 Web Components 中用于插入其他标记的占位符。

<my-component>
  <slot name="header">默认标题</slot>
</my-component>

<template> 用途：定义在页面加载时不显示的内容，用于动态生成内容。

<template id="myTemplate">
  <p>这是一个模板内容。</p>
</template>

其他语义化标签

<figure> <figcaption> 用途：定义独立的流内容，如图像、图表、代码片段等。与定义 figure 元素的标题。

<figure>
  <img src="image.jpg" alt="示例图像">
  <figcaption>这是一个示例图像。</figcaption>
</figure>

<address> 用途：定义联系信息。

<address>
  联系地址：<br>
  公司名称<br>
  街道地址<br>
  城市, 邮政编码
</address>

<b>, <i>, <u>, <s> 主要用于样式目的，而不是语义化。推荐使用 CSS 来控制样式。

ARIA 属性

虽然不是 HTML5 标签本身，但 ARIA（Accessible Rich Internet Applications）属性可以与语义化标签结合使用，以提高可访问性。

<button aria-label="关闭">X</button>

常见的 HTML5 语义化标签​

结构化标签​

文本级语义​

嵌入内容​

表单相关​

交互性​

Web Components​

其他语义化标签​

ARIA 属性​